<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="white-module global-ruleForm"
    :size="formSize"
  >
    <el-form-item label="封面图" prop="pic">
      <img :src="ruleForm.pic" style="height:180px;"/>
    </el-form-item>
    <el-form-item label="课程名称" prop="title">
      <el-input v-model="ruleForm.title" disabled />
    </el-form-item>
    <el-form-item label="课程分类" prop="categoryName" v-if="ruleForm.categoryName">
      <el-input v-model="ruleForm.categoryName" disabled />
    </el-form-item>
    <el-form-item label="适用学段" prop="period">
      <el-input v-model="ruleForm.period" disabled />
    </el-form-item>
    <el-form-item label="适用场景" prop="scene">
      <el-input v-model="ruleForm.scene" disabled />
    </el-form-item>
    <el-form-item label="配套教具" prop="tools" v-if="ruleForm.tools">
      <el-input v-model="ruleForm.tools" disabled />
    </el-form-item>
    <el-form-item label="简介" prop="introduction" >
      {{ruleForm.introduction}}
    </el-form-item>
    <el-form-item label="详情" prop="details" >
      <div v-html="ruleForm.details" class="jianjie"></div>
    </el-form-item>

    <!--课时列表-->
    <div class="global-table">
      <el-table
          :data="ruleForm.dataList"
          :header-cell-style="{
          background: '#F5F7FA',
          color: '#333',
        }"
          style="width: 100%"
      >
        <el-table-column prop="title" label="课程名称" />
        <el-table-column prop="type" label="课程分类" >
          <template v-slot="scope">
            <el-tag v-if="scope.row.type === 1" size="small" >平台课程</el-tag>
            <el-tag v-else-if="scope.row.type === 2" size="small" >集团定制</el-tag>
            <el-tag v-else size="small">本校课程</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="guide" label="指导" />
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="text" size="small" @click="updGuide(scope.row)"> 编辑指导 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>



    <el-form-item class="btns">
      <el-button type="primary" @click="queryCourseDetail()"
        >返回</el-button
      >
    </el-form-item>
  </el-form>


  <!--编辑学校指导-->
  <el-dialog title="编辑学习指导" v-model="states.showFlag">
    <el-form :model="guideForm">
      <el-form-item label="学习指导" label-width="120px">
        <!--
         <el-input
             type="textarea"
             rows="3"
             placeholder="请填写学习指导"
             v-model="guideForm.guide"
         ></el-input>
         -->
        <editor v-model="guideForm.guide" :init="{ height: 300 }"></editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding-left: 120px;">
      <el-button @click="states.showFlag = false">取 消</el-button>
      <el-button type="primary" @click="saveGuide()">确 定</el-button>
    </div>
  </el-dialog>


</template>


<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
import type { FormInstance } from "element-plus";
import {ElMessage} from "element-plus";
import Tinymce from "@/components/tinymce";
export default defineComponent({
  components: { editor: Tinymce },
  setup() {
    return reactive({
      ruleFormRef:{},
      states: {
        showFlag: false
      },
      ruleForm: {
        pic: "",
        title: "",
        period: "",
        scene: "",
        tools: "",
        introduction: "",
        details: "",
        dataList: []
      },
      guideForm: {
        classHourId: "",
        guide: ""
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        classroom: [
          {
            required: true,
            message: "请选择课堂",
            trigger: "change",
          },
        ],
        class: [
          {
            required: true,
            message: "请选择课时",
            trigger: "change",
          },
        ],
        course: [
          {
            type: "array",
            required: true,
            message: "请选择课程",
            trigger: "change",
          },
        ],
        images: [
          {
            required: true,
            message: "请选择资料",
            trigger: "change",
          },
        ],
      }
    });
  },
  computed: {
    dataRule() {
      return {
      };
    }
  },
  mounted() {
    this.queryCourseDetail();
    this.queryClassHourList();
  },
  methods: {
    /**
     * 获取课件
     */
    queryCourseDetail() {
      baseService.get("/fii/front/fiicourse/" + this.$route.query.id, {})
          .then((res) => {
                if (res.code === 0) {
                  let course = res.data;
                  this.ruleForm.pic = course.pic;
                  this.ruleForm.title = course.title;
                  this.ruleForm.period = course.period;
                  this.ruleForm.scene = course.scene;
                  this.ruleForm.tools = course.tools;
                  this.ruleForm.introduction = course.introduction;
                  this.ruleForm.details = course.details;
                }
              }
          );
    },

    /**
     * 获取课程的所有课时列表
     */
    queryClassHourList(){
      baseService
          .post("/fii/front/classRoom/queryClassHourList", {courseId: this.$route.query.id})
          .then((res) => {
                if (res.code === 0) {
                  this.ruleForm.dataList = res.data.classHourList;
                  console.log(this.ruleForm.dataList)
                }
              }
          );
    },

    /**
     * 编辑学习指导
     */
    updGuide(entity: any){
      this.states.showFlag = true;
      this.guideForm.classHourId = entity.id;
      this.guideForm.guide = entity.guide;
    },

    /**
     * 保存学习指导
     */
    saveGuide() {
      baseService
          .post("/fii/front/classRoom/saveGuide", this.guideForm)
          .then((res) => {
                if (res.code === 0) {
                  ElMessage.success(res.msg);
                  this.states.showFlag = false;

                } else {
                  ElMessage.error(res.msg);
                }
                //刷新当前页面
                this.queryCourseDetail();
                this.queryClassHourList();
              }
          );
    },

    submitForm(formEl: FormInstance | undefined){
      baseService
          .post("/fii/front/classRoom/addOrUpdate",this.ruleForm)
          .then((res) =>
              {
                if (res.code === 0) {
                  ElMessage.success(res.msg);
                } else {
                  ElMessage.error(res.msg);
                }
              }
          );

    },

    resetForm(formEl: FormInstance | undefined){
      if (!formEl) return;
      formEl.resetFields();
    },

    goBack() {
      history.back();
    }

  }
});
</script>


<!--
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue";
import baseService from "@/service/baseService";
import listService from "@/service/listService";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import {getToken} from "@/utils/cache";
import {useRoute} from "vue-router";
import Tinymce from '@tinymce/tinymce-vue';
const route = useRoute();
const headers={tokenId:getToken()};


export default defineComponent({
  components: { editor: Tinymce },
  setup() {
    const state =  reactive({
      ruleFormRef:{},
      states: {
        showFlag: false
      },
      ruleForm: {
        pic: "",
        title: "",
        period: "",
        scene: "",
        tools: "",
        introduction: "",
        details: "",
        dataList: []
      },
      guideForm: {
        classHourId: "",
        guide: ""
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        classroom: [
          {
            required: true,
            message: "请选择课堂",
            trigger: "change",
          },
        ],
        class: [
          {
            required: true,
            message: "请选择课时",
            trigger: "change",
          },
        ],
        course: [
          {
            type: "array",
            required: true,
            message: "请选择课程",
            trigger: "change",
          },
        ],
        images: [
          {
            required: true,
            message: "请选择资料",
            trigger: "change",
          },
        ],
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  created() {

    // this.queryCourseDetail();
    // this.queryClassHourList();
  },

  methods: {
    init: function () {
      console.log('==========')
    },
    /**
     * 获取课件
     */
    queryCourseDetail() {
      baseService.get("/fii/front/fiicourse/" + route.query.id, {})
          .then((res) => {
                if (res.code === 0) {
                  let course = res.data;
                  this.ruleForm.pic = course.pic;
                  this.ruleForm.title = course.title;
                  this.ruleForm.period = course.period;
                  this.ruleForm.scene = course.scene;
                  this.ruleForm.tools = course.tools;
                  this.ruleForm.introduction = course.introduction;
                  this.ruleForm.details = course.details;
                }
              }
          );
    },

    /**
     * 获取课程的所有课时列表
     */
    queryClassHourList(){
      baseService
          .post("/fii/front/classRoom/queryClassHourList", {courseId: route.query.id+''})
          .then((res) => {
                if (res.code === 0) {
                  this.ruleForm.dataList = res.data.classHourList;
                  console.log(this.ruleForm.dataList)
                }
              }
          );
    },

    /**
     * 编辑学习指导
     */
    updGuide(entity: any){
      this.states.showFlag = true;
      this.guideForm.classHourId = entity.id;
      this.guideForm.guide = entity.guide;
    },

    /**
     * 保存学习指导
     */
    saveGuide() {
      baseService
          .post("/fii/front/classRoom/saveGuide", this.guideForm)
          .then((res) => {
                if (res.code === 0) {
                  ElMessage.success(res.msg);
                  this.states.showFlag = false;

                } else {
                  ElMessage.error(res.msg);
                }
                //刷新当前页面
                this.queryCourseDetail();
                this.queryClassHourList();
              }
          );
    },

    submitForm(formEl: FormInstance | undefined){
      baseService
          .post("/fii/front/classRoom/addOrUpdate",this.ruleForm)
          .then((res) =>
              {
                if (res.code === 0) {
                  ElMessage.success(res.msg);
                } else {
                  ElMessage.error(res.msg);
                }
              }
          );

    },

    resetForm(formEl: FormInstance | undefined){
      if (!formEl) return;
      formEl.resetFields();
    },

    goBack() {
      history.back();
    }


  }
});
</script>
-->

<style scoped lang="scss">
.global-ruleForm {
  padding: 44px 44px 24px;
  .classroom {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .comment {
    color: #4f5a70;
    display: flex;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
      display: block;
      cursor: pointer;
      margin-left: 16px;
    }
  }
  .upload {
    width: 162px;
    height: 110px;

    text-align: center;
    background: rgba(222, 224, 227, 0.23);
    border-radius: 4px;
    border: 1px solid #dee0e3;
    img {
      width: 24px;
      height: 24px;
      margin-top: 30px;
    }
    div {
      margin-top: -12px;
      color: #959ca9;
      font-size: 12px;
    }
  }
  .files {
    display: block;
    margin-top: -5px;
    .item {
      font-size: 12px;
      font-weight: 400;
      color: #00a0e9;
      line-height: 17px;
      margin-right: 24px;
      margin-bottom: 10px;
    }
  }
  .jianjie{
    width: 95%;
  }

}
</style>

<style scoped lang="scss">
::v-deep img{
  max-width:100%;
}
</style>
